import React, { Component } from 'react'
import { Form, Button, Switch, Radio, Input, InputNumber, Select, Row, Col } from 'antd'
import { messages } from "share/common"
import Condition from 'components/condition'
import Priority from "components/template/priority"
import constant from "../constant"
import SaveHoc from "./save-hoc"
import WrapFormItem from "components/wrap-form-item"

const { Option } = Select;

class AccountRule extends Component {

  state = {
    priority: null,
    saveLoading: false
  };

  componentWillMount() {
    const { record } = this.props.params;
    this.setState({
      priority: record.optionId ? {
        levelOrgName: record.levelOrgName,
        levelOrgId: record.levelOrgId
      } : null
    })
  };

  handleSave = () => {
    this.props.form.validateFieldsAndScroll((err, value) => {
      if (!err) {
        value = { ...value, ...value.txtSetting };
        delete value.txtSetting;
        this.props.handleSave('saveAccountRule', value, 'distributionList');
      }
    })
  };

  handlePriority = value => {
    this.setState({ priority: value });
  };

  render() {
    const { getFieldDecorator, getFieldValue } = this.props.form;
    const { saveLoading, priority } = this.state;
    const { close } = this.props, { record } = this.props.params;
    const { formItemLayout } = constant;
    return (
      <div>
        <Form className={'new-form'}>
          <Condition>
            <Condition.If value={record.onlyRead}>
              <h3 className='sub-title'>{messages('finance-1.key346')/*分录导出设置*/}</h3>
              <Form.Item
                label={messages('finance-1.key277')/*导出格式*/}
                {...formItemLayout}
                required
              >
                <div>XLSX</div>
              </Form.Item>
              <Form.Item
                label={messages('finance-1.key278')/*导出样式*/}
                {...formItemLayout}
                required
              >
                <div>{messages('finance-1.key279')/*头行合并*/}</div>
              </Form.Item>
              <Form.Item
                label={messages('finance-1.key281')/*接口样式*/}
                {...formItemLayout}
                required
              >
                <div>{messages('finance-1.key279')/*头行合并*/}</div>
              </Form.Item>
              <Form.Item
                label={messages('finance-1.key347')/*反冲方式*/}
                {...formItemLayout}
                extra={messages('finance-1.key348')/*此处反冲方式通用于报销单、借款单的审核反冲及付款反冲，若需要进行反冲，需联系管理员开通\"财务管理-审核反冲\"页面权限*/}
                required
              >
                <div>{messages('finance-1.key349')/*删除原凭证*/}</div>
              </Form.Item>
              <Form.Item
                label={messages('finance-1.key350')/*反冲凭证类型*/}
                {...formItemLayout}
                required
              >
                <div>{messages('finance-1.key351')/*红字冲销*/}</div>
              </Form.Item>
              <Form.Item
                label={messages('finance-1.key352')/*报销支付凭证兼容全额核销凭证*/}
                {...formItemLayout}
                extra={messages('finance-1.key353')/*用于控制在全额核销场景下，“报销支付凭证”中是否支持“报销单核销凭证”的生成，若选择“支持”，则可在“报销支付凭证”中通过配置生成核销凭证*/}
                required
              >
                <div>{messages('finance-1.key244')/*启用temp*/}</div>
              </Form.Item>
            </Condition.If>
            <Condition.Else>
              <Form.Item
                label={messages('common.column.status')/*状态*/}
                {...formItemLayout}
              >
                {getFieldDecorator("isEnable", {
                  rules: [{ required: true }],
                  valuePropName: "checked",
                  initialValue: record.hasOwnProperty('isEnable') ? record.isEnable : true
                })(
                  <Switch>{messages('finance-1.key244')/*启用temp*/}</Switch>
                )}
              </Form.Item>
              <Priority
                top='SET_OF_BOOK'
                disabled={record.hasOwnProperty('id')}
                onChange={this.handlePriority}
                formItemLayout={formItemLayout}
                defaultValue={priority}
                single={false}
                showCompany={false}
                showCompanyComponent={false}
              />
              <h3 className='sub-title'>{messages('finance-1.key346')/*分录导出设置*/}</h3>
              <Form.Item
                label={messages('finance-1.key277')/*导出格式*/}
                {...formItemLayout}
              >
                {getFieldDecorator("optionalEptFmt", {
                  rules: [{ required: true }],
                  initialValue: record.optionalEptFmt || '1'
                })(
                  <Radio.Group options={[
                    { label: messages('finance-1.key354')/*XLSX*/, value: '1' },
                    { label: messages('finance-1.key355')/*XLS*/, value: '2' },
                    { label: messages('finance-1.key356')/*CSV*/, value: '4' },
                    { label: 'TXT', value: '8' }
                  ]}/>
                )}
              </Form.Item>
              {
                getFieldValue('optionalEptFmt') === '8' && (
                  <Form.Item
                    label={messages('finance-1.key527')/*TXT文件设置*/}
                    {...formItemLayout}
                  >
                    {getFieldDecorator("txtSetting", {
                      rules: [{ required: true }, {
                        validator: (item, value, callback) => {
                          if (!value.optionalTxtSeparate) {
                            callback(messages('common.please.select')/*请选择*/);
                          }
                          callback();
                        }
                      }],
                      initialValue: {
                        optionalTxtSeparate: record.optionalTxtSeparate,
                        optionalTxtInteger: record.optionalTxtInteger,
                        optionalTxtDecimal: record.optionalTxtDecimal,
                        optionalTxtComplementChar: record.optionalTxtComplementChar
                      }
                    })(
                      <WrapFormItem>
                        {(onChange, value) => (
                          <div>
                            <Row>
                              <Col span={8}>
                                <span style={{ width: '60px', display: 'inline-block' }}>
                                  {messages('finance-1.key528')/*整数位数*/}:
                                </span>
                                <InputNumber
                                  step={1} min={1} max={15}
                                  value={value.optionalTxtInteger}
                                  placeholder={messages('common.please.input')/*请输入*/}
                                  style={{ width: 'calc(100% - 68px)' }}
                                  onChange={val => {
                                    let temp = { optionalTxtInteger: val };
                                    !val && typeof value.optionalTxtDecimal !== 'number' && (temp.optionalTxtComplementChar = undefined);
                                    onChange(temp)
                                  }}
                                />
                              </Col>
                              <Col span={8}>
                                <span style={{ width: '60px', display: 'inline-block' }}>
                                  {messages('finance-1.key529')/*小数位数*/}:
                                </span>
                                <InputNumber
                                  step={1} min={0} max={15}
                                  value={value.optionalTxtDecimal}
                                  placeholder={messages('common.please.input')/*请输入*/}
                                  style={{ width: 'calc(100% - 68px)' }}
                                  onChange={val => {
                                    let temp = { optionalTxtDecimal: val };
                                    typeof val !== 'number' && !value.optionalTxtInteger && (temp.optionalTxtComplementChar = undefined);
                                    onChange(temp)
                                  }}
                                />
                              </Col>
                              <Col span={8}>
                                <span style={{ width: '74px', display: 'inline-block' }}>
                                  {messages('finance-1.key530')/*补足位字符*/}:
                                </span>
                                <Select
                                  value={value.optionalTxtComplementChar}
                                  placeholder={messages('common.select')/*请选择*/}
                                  style={{ width: 'calc(100% - 82px)' }}
                                  onChange={val => onChange({ optionalTxtComplementChar: val })}
                                  disabled={!value.optionalTxtInteger && typeof value.optionalTxtDecimal !== 'number'}
                                >
                                  <Option key={'1'}>0</Option>
                                  <Option key={'2'}>{messages('finance-1.key531')/*空格*/}</Option>
                                </Select>
                              </Col>
                            </Row>
                            <Row>
                              <Col span={8}>
                                <span style={{ width: '60px', display: 'inline-block' }}>
                                  {messages('finance-1.key532')/*分隔符*/}:
                                </span>
                                <Select
                                  value={value.optionalTxtSeparate}
                                  placeholder={messages('common.select')/*请选择*/}
                                  style={{ width: 'calc(100% - 68px)' }}
                                  onChange={val => onChange({ optionalTxtSeparate: val })}
                                >
                                  <Option key={'1'}>,</Option>
                                  <Option key={'2'}>:</Option>
                                  <Option key={'4'}>|</Option>
                                  <Option key={'8'}>/</Option>
                                </Select>
                              </Col>
                            </Row>
                          </div>
                        )}
                      </WrapFormItem>
                    )}
                  </Form.Item>
                )
              }
              <Form.Item
                label={messages('finance-1.key278')/*导出样式*/}
                {...formItemLayout}
              >
                {getFieldDecorator("optionalEntryFmt", {
                  rules: [{ required: true }],
                  initialValue: record.optionalEntryFmt || '1'
                })(
                  <Radio.Group options={[
                    { label: messages('finance-1.key279')/*头行合并*/, value: '1' },
                    { label: messages('finance-1.key280')/*头行分离*/, value: '2' }
                  ]}/>
                )}
              </Form.Item>
              <Form.Item
                label={messages('finance-1.key281')/*接口样式*/}
                {...formItemLayout}
              >
                {getFieldDecorator("apiEntryFmt", {
                  rules: [{ required: true }],
                  initialValue: record.apiEntryFmt || '1'
                })(
                  <Radio.Group options={[
                    { label: messages('finance-1.key279')/*头行合并*/, value: '1' },
                    { label: messages('finance-1.key280')/*头行分离*/, value: '2' }
                  ]}/>
                )}
              </Form.Item>
              {
                getFieldValue('apiEntryFmt') === '2' && (
                  <Form.Item
                    label={messages('finance-1.key533')/*行列表接口编码名称*/}
                    {...formItemLayout}
                  >
                    {getFieldDecorator("journalLineListColumnName", {
                      initialValue: record.journalLineListColumnName || 'openJournalLineValueDTOList'
                    })(
                      <Input placeholder={messages('common.please.input')/*请输入*/}/>
                    )}
                  </Form.Item>
                )
              }
              <Form.Item
                label={messages('finance-1.key515')/*批次sheet页名称*/}
                {...formItemLayout}
                extra={messages('finance-1.key516')/*此处用于自定义分录导出批次文件的sheet页名称，若不设置，则默认为批次号；设置名称时，最多30个字符，且名称中不能包含“:”、“/”、“\\\\”、“?”、“*”、“[”、“]”等特殊字符*/}
              >
                {getFieldDecorator("batchSheetName", {
                  rules: [
                    {
                      max: 30,
                      message: messages('finance-1.key517')/*长度不能超过30*/
                    },
                    {
                      message: messages('finance-1.key518')/*包含非法字符*/,
                      validator: (rule, value, cb) => {
                        if (value === null || value === undefined || value === "") {
                          cb();
                          return;
                        }
                        let regExp = /[:|/|\\|\?|\*|\[|\]]/;
                        if (regExp.test(value)) {
                          cb(false);
                        } else {
                          cb();
                        }
                      },
                    }
                  ],
                  initialValue: record.batchSheetName
                })(
                  <Input placeholder={messages('common.please.input')/*请输入*/}/>
                )}
              </Form.Item>
              <h3 className='sub-title'>{messages('finance-1.key519')/*分录生成设置*/}</h3>
              <Form.Item
                label={messages('finance-1.key347')/*反冲方式*/}
                {...formItemLayout}
                extra={messages('finance-1.key348')/*此处反冲方式通用于报销单、借款单的审核反冲及付款反冲，若需要进行反冲，需联系管理员开通\"财务管理-审核反冲\"页面权限*/}
              >
                {getFieldDecorator("recoilTypeFmt", {
                  rules: [{ required: true }],
                  initialValue: record.recoilTypeFmt || '1'
                })(
                  <Radio.Group options={[
                    { label: messages('finance-1.key349')/*删除原凭证*/, value: '1' },
                    { label: messages('finance-1.key357')/*生成反冲凭证*/, value: '2' }
                  ]}/>
                )}
              </Form.Item>
              <Form.Item
                label={messages('finance-1.key350')/*反冲凭证类型*/}
                {...formItemLayout}
              >
                {getFieldDecorator("recoilJournalTypeFmt", {
                  rules: [{ required: true }],
                  initialValue: record.recoilJournalTypeFmt || '1'
                })(
                  <Radio.Group
                    options={[
                      { label: messages('finance-1.key351')/*红字冲销*/, value: '1' },
                      { label: messages('finance-1.key358')/*借贷相反凭证*/, value: '2' }
                    ]}
                    disabled={getFieldValue('recoilTypeFmt') === '1'}
                  />
                )}
              </Form.Item>
              <Form.Item
                label={messages('finance-1.key352')/*报销支付凭证兼容全额核销凭证*/}
                {...formItemLayout}
                extra={messages('finance-1.key353')/*用于控制在全额核销场景下，“报销支付凭证”中是否支持“报销单核销凭证”的生成，若选择“支持”，则可在“报销支付凭证”中通过配置生成核销凭证*/}
              >
                {getFieldDecorator("pushPaymentJournalFmt", {
                  rules: [{ required: true }],
                  initialValue: record.hasOwnProperty('pushPaymentJournalFmt') ? record.pushPaymentJournalFmt : 'true'
                })(
                  <Radio.Group
                    options={[
                      { label: messages('finance-1.key244')/*启用temp*/, value: 'true' },
                      { label: messages('finance-1.key266')/*不启用*/, value: 'false' }
                    ]}
                  />
                )}
              </Form.Item>
            </Condition.Else>
          </Condition>
        </Form>
        <div className='footer-operate'>
          <Condition.If value={!record.onlyRead}>
            <Button type='primary' onClick={this.handleSave} loading={saveLoading}>{messages('common.ok')/*确定*/}</Button>
          </Condition.If>
          <Button onClick={() => close()}>{record.onlyRead ? messages('common.back')/*返回*/ : messages('common.cancel')/*取消*/}</Button>
        </div>
      </div>
    )
  }

}

export default Form.create()(SaveHoc(AccountRule));
